<template>
  <div>
    <!-- 眼压 -->
    <el-divider :id="`region_${props.regionId}`">
      {{ props.title }}
    </el-divider>
    <table class="region_data">
      <thead>
        <tr>
          <th class="set_bg">
            {{ props.title }}
          </th>
          <th class="title_bg">CCT</th>
          <th class="title_bg">眼压值均值</th>
          <th class="title_bg">CCT修正后的眼压值均值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>OD</th>
          <td>
            {{ data_form.rightCct || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form.rightIOPAvg || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form.rightIOPccAvg || props.dbClickPlaceholder }}
          </td>
        </tr>
        <tr>
          <th>OS</th>
          <td>
            {{ data_form.leftCct || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form.leftIOPAvg || props.dbClickPlaceholder }}
          </td>
          <td>
            {{ data_form.leftIOPccAvg || props.dbClickPlaceholder }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {});

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
  iop_data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const data_form = ref({});
let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_check_region_data", (e) => {
    data_form.value = e.data.iop_data || {};
  });

  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});

watchEffect(() => {
  data_form.value = props.iop_data || {};
});
</script>

<style scoped lang="scss">
.title_bg {
  @apply w-[28.3%];
}
</style>